<template>
	<view>
		<view v-show="!loading">
			<!-- 吸顶 -->
			<indexSticky></indexSticky>
			<view class="index_body">
				<!-- banner -->
				<swipper :swipperList="swipperList"></swipper>
				<view class="index_subsection">
					<!-- 农产品分类 -->
					<level @componentClick="loadProducts"></level>
				</view>
				<view class="waterFall" :class="[productShow?'hiddenWaterFull':'']">
					<u-empty v-if="!dataList['length']" iconSize="240" textSize="40" class="isempty" marginTop="200">
					</u-empty>
					<!-- 瀑布流 -->
					<waterfall :dataList="dataList"></waterfall>
				</view>
				<u-divider v-if="bottom" color="#878787" bg-color="#f5f5f5" margin-top="60" margin-bottom="60"
					@click="getData">到底了
				</u-divider>
				<u-back-top :scroll-top="scrollTop" top="200" mode="square" right="5%" duration="500"></u-back-top>
			</view>
		</view>
		<products :show="productShow" :levelId="levelId" @close="closeProductsPopup"></products>
		<my-skeleton v-show="loading"></my-skeleton>
	</view>
</template>
<script>
	import waterfall from 'components/waterfall/waterfall'
	import indexSticky from 'components/indexSticky/sticky'
	import swipper from 'components/swipper/swipper'
	import level from 'components/level'
	import mySkeleton from "components/common/skeleton"
	import products from "components/products/products"
	import {productGrade} from "utils/enums/product"
	import {
		getBannerList,
		getIndexList
	} from "apis/farmer/goods.js"
	export default {
		components: {
			waterfall,
			indexSticky,
			swipper,
			level,
			mySkeleton,
			products
		},
		data() {
			return {
				levelId: productGrade.primary,
				//回到顶部
				scrollTop: 0,
				//商品卡片
				dataList: [],
				// 分页
				pageNo: 1,
				pageSize: 20,
				bottom: false,
				loading: true,
				productShow: false,
				swipperList: []
			}
		},

		methods: {
			closeProductsPopup() {
				this.productShow = false
				uni.setNavigationBarTitle({
					title: "首页"
				})
			},
			getListAdd(list) {
				for (let item of list) {
					this.dataList.push(item)
				}
			},

			/* 加载初级或加工农产品 */
			loadProducts(event) {
				this.levelId = event
				this.productShow = true
			},

			async getData() {
				const {
					code,
					data,
					msg
				} = await getIndexList(this.pageNo, this.pageSize)
				if (code !== 200) return this.$errorMsg(msg)
				this.getListAdd(this.$strFunc.deepCopy(data['list']))
				this.pageSize = 10
				this.pageNo++
				this.closeSkeleton()
			},
			/* 获取banner列表 */
			async getBannerData(){
				const {data} = await getBannerList()
				/* 如果没有从后端拿到数组类型的data，使用map方法就会报错 */
				if(!(data instanceof Array)) return null
				this.swipperList = data.map(item => ({
					 image: item.pictureUrl,
					 title: item.title,
				}))
				
			},
			closeSkeleton() {
				this.loading = false
			},
			init() {
				this.bottom = false;
				this.scrollTop = 0;
				this.dataList = [];
				this.pageNo = 1;
				this.pageSize = 20;
				this.getData(); //请求商品数据
				this.getBannerData()
				setTimeout(() => {
					this.closeSkeleton()
				}, 5000)
			}
		},
		onLoad() {
			this.init()
		},

		onReachBottom() { //到达底部
			this.getData();
		},
		onPullDownRefresh() {
			//监听下拉刷新动作的执行方法，每次手动下拉刷新都会执行一次
			this.init()
			setTimeout(function() {
				uni.stopPullDownRefresh(); //停止下拉刷新动画
			}, 1000);
		},
		onPageScroll(e) { //生命周期函数
			this.scrollTop = e.scrollTop;
		}
	}
</script>
<style>
	@import url("index.css");
</style>
